<template>
	<view class="bookDetalis">
		<toSafe></toSafe>
		<!-- 导航栏 -->
		<!-- <view class="nav-coustom">
			<icon type="left" size="26" @click="HandleLeft"/>
			<view class="">查看目录</view>
		</view> -->
		<uni-nav-bar 
			@clickLeft="HandleLeft" 
			color="#111" 
			:fixed="true" 
			leftIcon="left" 
			:border="false" 
			backgroundColor="transparent" 
			:title="''"
			>
			<!-- <block #right>
				<view class="query-directory" @click="queryDirectory">
					查看目录
				</view>
			</block> -->
		</uni-nav-bar>
		<swiper class="swiper-vertical" 
			:indicator-dots="false"
			:vertical="true"
			:autoplay="false"
			duration="500"
			:current="currentIndex"
			@change="changeNever"
			>
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item.src" class="swiper-image" lazy-load></image>
			</swiper-item>
		</swiper>
		<view class="header"></view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		GetNovelInfo
	} from '@/api/Novel.js'
	import {
		BookDetails
	} from '@/api/User.js'
	import {
		ref,
		reactive
	} from 'vue'
	import toSafe from '@/compoents/top-safe.vue'
	const data = reactive({
		startX: 0, // 触摸开始时的X坐标  
		startY: 0, // 触摸开始时的Y坐标  
		moveY: 0, // 触摸移动时的Y坐标  
		isMovingUp: false, // 是否正在向上滑动  
	})
	const imgurl = ref()
	let page = ref(1)
	let id = ref()
	let swiperList = reactive([]);
	// onLoad((e) => {
	// 	getList(page)
	// })

	function bindchange() {}

	// 触摸开始  
	function handleTouchStart(e) {
		data.startX = e.touches[0].clientX;
		data.startY = e.touches[0].clientY;
	}
	// 触摸移动  
	function handleTouchMove(e) {
		data.moveY = e.touches[0].clientY;  
		let moveDistance = data.moveY - data.startY; 
		data.isMovingUp = moveDistance < 0 ? true : false;
		// if(data.isMovingUp) {
		// 	page.value += 1
		// } else {
		// 	page.value == 1 ? 1 : page.value -= 1
		// }
	}
	// 触摸结束  
	function handleTouchEnd() {
		if (data.isMovingUp) {
			  page.value+= 1
			getList(page)
		} else {
			page.value-= 1
			getList(page)
		}
		// 重置状态  
		data.startX = 0;
		data.startY = 0;
		data.moveY = 0;
		data.isMovingUp = false;
	}
	// 一次性加载多少条
	let pagesize = 5;
	// 目前加载到多少条数了
	let currentPage = 0;
	let currentIndex = ref(0);
	const changeNever = (e) => {
		let current = e.detail.current;
		currentIndex.value = current;
		console.log(current, currentPage);
		if(current == (currentPage-3)) {
			loadBooks()
		}
		
	}
	onLoad((e) => {
		id.value = e.id
		loadBooks();
	})
	const loadBooks = () => {
		let feathlis = [];
		for(let i = 1; i <= pagesize; i++) {
			currentPage += 1;
			feathlis.push(getList(currentPage));
		}
		// uni.showLoading({
		// 	title: "加载中"
		// })
		Promise.all(feathlis).then(res => {
			console.log(res)
			// uni.hideLoading();
			res.forEach(ele => {
				swiperList.push({src: `http://www.filwc.com/prod-api/profile/upload/${ele}`})
			})
		})
	}
	async function getList(page) {
		return BookDetails({novelId:id.value,page})
			.then(data => {
				return data.msg;
			})
	}
	
	const HandleLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const queryDirectory = () => {
		uni.navigateTo({
			url: "/pages/Directory/Directory"
		})
	}
</script>

<style lang="less" scoped>
	@interval: {
		letter-spacing: 2rpx;
	}

	@border: 1rpx solid #e8e3e3;

	.swiper-vertical {
		/* 你可以根据需要调整 swiper 的样式 */
		width: 100%;
		/* 或者你需要的宽度 */
		height: 100%;
		/* 根据需要设置高度 */
	}

	// .swiper-item-content {
	// 	/* swiper-item 的内容样式 */
	// 	height: 100%;
	// 	/* 使得内容填充整个 swiper-item */
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	/* 其他样式，如字体大小、颜色等 */
	// }

	.swiper-image {
		width: 100%;
		height: 100%;
	}
	
	.header {
		
	}

	.bookDetalis {
		width: 100%;
		height: 100%;
		// padding: 0 40rpx;
		.nav-coustom {
			height: 88rpx;
			background: #FFF;
		}
		.query-directory {
			color: #e5353f;
			text-align: right;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			opacity: 0.9;
			margin-right: 18rpx;
		}
		.bookMessage {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 80rpx;

			image {
				width: 186rpx;
				height: 262rpx;
				border-radius: 8rpx;
			}

			.bookTitle {
				font-size: 36rpx;
				font-weight: 600;
				margin: 40rpx 0 20rpx 0;
				@interval();
			}

			.author {
				font-size: 26rpx;
				opacity: 0.5;
				@interval();
			}
		}

		.content {
			padding: 24rpx;
			background: #fff;
			border-radius: 24rpx;
			margin-top: 30rpx;

			.tag {
				display: flex;
				margin-bottom: 20rpx;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}

				.tags {
					padding: 4rpx 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					@interval();
					border-radius: 12rpx;
					background: #F5F5F5;
					font-size: 22rpx;
					opacity: 0.5;
					margin-left: 30rpx;
				}
			}

			.fragment {
				width: 100%;
				height: auto;
				font-size: 24rpx;
				@interval();
				opacity: 0.5;
				padding: 20rpx;
			}

			.catalogue {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25rpx 0;
				border-top: @border;
				border-bottom: @border;
				margin-top: 20rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
				}

				.controls {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					opacity: 0.5;
				}
			}

			.evaluate {
				display: flex;
				flex-direction: column;
				margin-top: 25rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
				}

				.evaluateLists {
					width: 100%;

					.list {
						display: flex;
						margin-top: 10rpx;

						img {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin: 0 10rpx 0 0;
						}

						text {
							font-size: 24rpx;
							opacity: 0.5;
							@interval();
						}
					}
				}
			}


		}

		.btn {
			margin-top: 40rpx;
			color: #E5353F;
			width: 320rpx;
			height: 72rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>